<script setup>
	import { ref } from 'vue'
	import { useRoleStore } from '@/stores/role'
	import { updateUserInfoService } from '@/api/user'
	import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'

	const roleStore = useRoleStore()
	const formLabelAlign = ref({
		...roleStore.info,
	})

	const rules = {
		userNickname: [
			{
				required: true,
				message: '请输入昵称',
				trigger: 'blur',
			},
			{
				pattern: /^\S{2,10}$/,
				message: '5-16位非空字符',
				trigger: 'blur',
			},
		],
		userEmail: [
			{
				required: true,
				message: '请输入邮箱',
				trigger: 'blur',
			},
			{
				type: 'email',
				message: '邮箱格式不正确',
				trigger: 'blur',
			},
		],
	}

	const submit = async () => {
		let info = {
			id: roleStore.info.id,
			userName: roleStore.info.userName,
			role: roleStore.info.role,
			userAvatar: roleStore.info.userAvatar,
			userNickname: formLabelAlign.value.userNickname,
			userEmail: formLabelAlign.value.userEmail,
		}

		ElMessageBox.confirm(`确认更新个人信息?`)
			.then(async () => {
				await updateUserInfoService(info)
				roleStore.setInfo(info)
				ElNotification({
					title: '更新成功',
					message: `成功更新个人信息`,
					type: 'success',
				})
			})
			.catch(() => {
				ElMessage.info('取消更新')
			})
	}
</script>

<template>
	<el-form
		label-position="right"
		label-width="auto"
		:model="formLabelAlign"
		:rules="rules"
		style="max-width: 600px">
		<el-form-item label="用户名" prop="userName">
			<el-input v-model="formLabelAlign.userName" disabled />
		</el-form-item>
		<el-form-item label="昵称" prop="userNickname">
			<el-input v-model="formLabelAlign.userNickname" />
		</el-form-item>
		<el-form-item label="邮箱" prop="userEmail">
			<el-input v-model="formLabelAlign.userEmail" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submit">提交修改</el-button>
		</el-form-item>
	</el-form>
</template>

<style scoped></style>
